<template>
    <div>
        <div class="app">
            <div class="dataset-overview-header">
                <button class="create-dataset-btn" @click="$emit('n_step')">创建数据集</button>
                <!-- 下拉菜单 -->
                <div class="dropdown">
                    <button class="dropdown-toggle" @click="toggleDropdown">我的数据集</button>
                    <div class="dropdown-menu" v-if="showDropdown">
                        <a href="#" class="dropdown-item" v-for="dataset in datasets" :key="dataset.id1" @click="selectDataset(dataset)">
                            {{ dataset.name }}
                        </a>
                    </div>
                </div>
            </div>
            <div class="dataset-overview-container">
                <div class="dataset" v-for="dataset in datasets" :key="dataset.id">
                    <div class="dataset" v-for="dataset in datasets" :key="dataset.id">
                        <div class="dataset-header">
                            <h2></h2>
                            <div>dataset-3月销售数据    数据组ID:{{dataset.groupId1}}</div>
                        </div>
                        <div class="dataset-stats">
                            <div class="labels-row">
                                <label>版本</label>
                                <label>数据集ID</label>
                                <label>行数</label>
                                <label>列数</label>
                                <label>进度</label>
                                <label>技术方向</label>
                                <label>操作</label>
                            </div>
                            <div class="data-row">
                                <div class="data-cell">{{ dataset.version2 }}</div>
                                <div class="data-cell">{{ dataset.id1 }}</div>
                                <div class="data-cell">{{ dataset.rows }}</div>
                                <div class="data-cell">{{ dataset.columns }}</div>
                                <div class="data-cell">{{ dataset.progress1 }}</div>
                                <div class="data-cell">{{ dataset.technology }}</div>
                                <div class="dataset-actions">
                                    <button @click="viewDataset(dataset.id)">查看</button>
                                    <button @click="deleteDataset(dataset.id)">删除</button>
                                </div>
                            </div>
                            <div class="data-row">
                                <div class="data-cell">{{ dataset.version1 }}</div>
                                <div class="data-cell">{{ dataset.id2 }}</div>
                                <div class="data-cell">{{ dataset.rows1 }}</div>
                                <div class="data-cell">{{ dataset.columns1 }}</div>
                                <div class="data-cell">{{ dataset.progress2 }}</div>
                                <div class="data-cell">{{ dataset.technology }}</div>
                                <div class="dataset-actions" >
                                    <button @click="viewDataset(dataset.id)">导入</button>
                                    <button @click="viewDataset(dataset.id)">查看</button>
                                    <button @click="deleteDataset(dataset.id)">删除</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dataset-overview-container">
                <div class="dataset" v-for="dataset in datasets" :key="dataset.id">
                    <div class="dataset" v-for="dataset in datasets" :key="dataset.id">
                        <div class="dataset-header">
                            <h2></h2>
                            <div>dataset-2月销售数据    数据组ID:{{dataset.groupId2}}</div>
                        </div>
                        <div class="dataset-stats">
                            <div class="labels-row">
                                <label>版本</label>
                                <label>数据集ID</label>
                                <label>行数</label>
                                <label>列数</label>
                                <label>进度</label>
                                <label>技术方向</label>
                                <label>操作</label>
                            </div>
                            <div class="data-row">
                                <div class="data-cell">{{ dataset.version1 }}</div>
                                <div class="data-cell">{{ dataset.id3 }}</div>
                                <div class="data-cell">{{ dataset.rows2 }}</div>
                                <div class="data-cell">{{ dataset.columns2 }}</div>
                                <div class="data-cell">{{ dataset.progress2 }}</div>
                                <div class="data-cell">{{ dataset.technology }}</div>
                                <div class="dataset-actions">
                                    <button @click="viewDataset(dataset.id)">导入</button>
                                    <button @click="viewDataset(dataset.id)">查看</button>
                                    <button @click="deleteDataset(dataset.id)">删除</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                datasets: [
                    {
                        id1: 1760741,
                        id2: 1760725,
                        id3: 1757972,
                        name: "3月销售数据",
                        version1: "V1",
                        version2: "V2",
                        groupId1: 488293,
                        groupId2: 488292,
                        rows: "", // 该数据应从服务器获取
                        rows1:50,
                        rows2:100,
                        columns: "", // 该数据应从服务器获取
                        columns1:4,
                        columns2:5,
                        progress1: "91%",
                        progress2: "已完成",
                        technology: "表格预测"
                    },
                    // ...更多数据集对象
                ],
                menuItems: [
                    {text: '项目空间切换'},
                    { text: '功能应用', route: '/applications' },
                    { text: '基础分析', route: '/analysis' },
                    { text: '数据服务', route: '/data-service' },
                    { text: '人工智能', route: '/ai' },
                    { text: '推理决策', route: '/inference' },
                ],
                showDropdown: false
            };
        },
        methods: {
            createDataset() {
                // 逻辑创建数据集
                this.$parent.n_step();
                console.log("创建数据集");
            },
            viewDataset(id) {
                // 逻辑查看数据集
                console.log("查看数据集", id);
            },
            deleteDataset(id) {
                // 逻辑删除数据集
                console.log("删除数据集", id);
            },
            navigate(route) {
                // 在这里处理导航逻辑，例如使用Vue-router进行页面跳转
                console.log('Navigating to:', route);
                // this.$router.push(route);
            },
            toggleDropdown() {
                this.showDropdown = !this.showDropdown;
            },
            selectDataset(dataset) {
                // 根据需要处理选中的数据集
                console.log("选中的数据集: ", dataset.name);
                this.showDropdown = false;
            },
            viewDetails(id) {
                // 执行查看详情的逻辑，比如打开一个模态框或导航到另一个页面
                console.log("查看详情: ", id);
            },
        }
    };
</script>

<style>
    .app {
        /* padding-top: 100px; */
        margin: 0 auto;
        max-width: 80%;
        height: auto;
    }

    .dataset-overview-header {
        display: flex;
        align-items: center;
        justify-content: start;
        flex-direction: row;
        padding: 10px;
        background-color: #f5f5f5;
        margin-bottom: 20px;
    }

    .dataset {
        border: 1px solid #ccc;
        padding: 10px;
        margin-bottom: 10px;
    }

    .create-dataset-btn {
        padding: 6px 12px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;

    }

    .create-dataset-btn:hover {
        background-color: #0056b3;
    }
    .dataset-overview h1 {
        margin-bottom: 10px;
    }

    .dataset {
        border: 0px solid #ccc;
        padding: 10px;
        margin-top: 5px;
    }

    .dataset-header h2 {
        margin: 0;
        padding: 0;
    }

    .dataset-actions {
        margin-top: 10px;
        color: blue;
    }
    /* 添加适当的样式 */

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-toggle {
        padding: 6px 12px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-left: 380px; /* 或根据布局调整 */
    }

    .dropdown-menu {
        display: block;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-item {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-item:hover {
        background-color: #f1f1f1;
    }
    .dataset-header {
        font-weight: bold;
    }
    .dataset-stats {
        display: grid;
        /* gap: 40px;这将同时设置行间距和列间距 */
        /* 你也可以分别设置行间距和列间距，如下所示 */
        row-gap: 20px;
        column-gap: 80px;
    }

    .labels-row,
    .data-row {
        display: grid;
        grid-template-columns: repeat(7, 1fr); /* 假设你有七个标签 */
        column-gap: 80px;
        justify-items: start; /* 使所有子项在单元格的起始边缘对齐 */
        align-items: center; /* 使所有子项垂直居中对齐 */
    }

    .labels-row label,
    .data-row .data-cell {
        place-self: center start;
        padding: 5px; /* 如果你还想添加一些内边距，也可以像这样 */
    }
    .info-button {
        background: gray;
        border: none;
        cursor: pointer;
        padding: 0;
        margin-left: 10px;
        font-size: 1em;
    }
    .info-button:hover {
        color: #0056b3;
    }

</style>